<template>
	<view @touchmove.stop.prevent>
		<u-popup 
			:show="showSetting" 
			mode="right" 
			height="100%"
			@touchmove.stop.prevent
			@close="close"
		>
			<scroll-view 
				scroll-y
				style="background-color: #F6F8FA; height: 100vh;"
			>
				<view style="width:580rpx;background-color: #F6F8FA;padding: 0 48rpx;box-sizing: border-box;">
					<view style="margin-top: 132rpx;display: flex;justify-content: flex-start;align-items: center;" @click="editUserInfo">
						<view>
							<u-avatar :src="user_info.avatar" shape="circle" :size="84"></u-avatar>
						</view>
						<view style="color: #232426;font-size: 36rpx;margin-left: 20rpx;">
							{{user_info.nickname}}
						</view>
						<view style="margin-left: 20rpx;background-color:#fff;border-radius: 14rpx;">
							<u-image
								src="/static/images/icon/right-icon.png"
								width="40rpx"
								height="40rpx"
							></u-image>
						</view>
					</view>
					<view style="margin-top: 76rpx;">
						<view v-if="showExpert" @click="goGuide" style="background: linear-gradient(273deg, #00BFFF 0%, #77DFEA 37.02%, #069AFD 100%);border-radius: 24rpx;display: flex;padding:32rpx;box-sizing: border-box;justify-content: space-between;">
							<view style="display: flex;justify-content: flex-start;">
								<view>
									<u-image
										src="/static/images/icon/tools/shield.svg"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #FFF;margin-left: 24rpx;">成爲達人</view>
							</view>
						</view>
						<view @click="goOrder(1)" style="background-color: #fff;border-radius: 16rpx;display: flex;padding:32rpx;box-sizing: border-box;justify-content: space-between;margin-top: 30rpx;">
							<view style="display: flex;justify-content: flex-start;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x.png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">我的工作</view>
							</view>
							<view v-if="workOrder" style="background-color: #FF3D43;width: 32rpx;height: 32rpx;text-align: center;font-size: 24rpx;border-radius: 50%;color: #fff;">
								{{workOrder}}
							</view>
						</view>
						<view @click="goOrder(2)" style="background-color: #fff;border-radius: 16rpx;display: flex;padding:32rpx;box-sizing: border-box;justify-content: space-between;margin-top: 30rpx;">
							<view style="display: flex;justify-content: flex-start;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(1).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">我的訂單</view>
							</view>
							<view v-if="workOrder" style="background-color: #FF3D43;width: 32rpx;height: 32rpx;text-align: center;font-size: 24rpx;border-radius: 50%;color: #fff;">
								{{myOrder}}
							</view>
						</view>
						<view style="box-sizing: border-box;margin-top: 30rpx;">
							<view @click="goWallet" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;border-radius: 16rpx 16rpx 0 0;" >
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(2).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">錢包</view>
							</view>
							<view @click="goFans" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;margin-top: 2rpx;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(3).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">我的追蹤</view>
							</view>
							<view @click="goStart" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;margin-top: 2rpx;border-radius: 0 0 16rpx 16rpx;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(4).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">收藏記錄</view>
							</view>
							<view @click="goInvite" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;margin-top: 2rpx;border-radius: 0 0 16rpx 16rpx;">
								<view>
									<u-image
										src="/static/images/icon/tools/gift.svg"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">邀請好友</view>
							</view>
						</view>
						<view style="box-sizing: border-box;margin-top: 30rpx;">
							<view @click="goAuth" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;border-radius: 16rpx 16rpx 0 0;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(5).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">實名認證</view>
							</view>
							<view @click="resetPsw" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;margin-top: 2rpx;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(6).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">重設密碼</view>
							</view>
							<view style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;margin-top: 2rpx;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(7).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">切換語言</view>
							</view>
							<view @click="openServiceFn" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;margin-top: 2rpx;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(8).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">聯繫客服</view>
							</view>
							<view @click="showContent('about')" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;margin-top: 2rpx;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(9).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">關於我們</view>
							</view>
							<view @click="showContent('agreement')" style="display: flex;justify-content: flex-start;padding:32rpx;background-color: #fff;margin-top: 2rpx;border-radius: 0 0 16rpx 16rpx;">
								<view>
									<u-image
										src="/static/images/icon/tools/Icon@2x(10).png"
										width="40rpx"
										height="40rpx"
									></u-image>
								</view>
								<view style="font-size: 28rpx;color: #232426;margin-left: 24rpx;">服務條款/隱私協議</view>
							</view>
						</view>
					</view>
					<view style="width: 100%;text-align: center;margin: 24rpx auto;padding-bottom: 32rpx;">
						<view style="color: #808690;font-size: 28rpx;" @click="signOut">登出</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import { openLineApp } from '@/utils/openApp.js';
	export default {
		props: {
		    
		},
		data() {
		    return {
				user_info:{},
				showSetting:false,
				showExpert:false,
				workOrder:0,
				myOrder:0
		    };
		},
		methods: {
		    show() {
		        this.user_info = uni.getStorageSync('userInfo');
				this.showSetting = true;
				if( this.user_info.is_first == 0 ){
					this.showExpert = true;
				}
				uni.hideTabBar();
		    },
			close(){
				this.showSetting = false;
				uni.showTabBar();
			},
			signOut(){
				uni.showTabBar();
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/index/login'
				});
			},
			goWallet(){
				uni.navigateTo({
					url:'/pages/my/wallet'
				})
			},
			goOrder(type){
				uni.navigateTo({
					url:'/pages/order/log?type='+type
				})
				// uni.navigateTo({
				// 	url:'/pages/order/details?type='+type
				// })
			},
			goFans(){
				uni.navigateTo({
					url:'/pages/my/fans'
				})
			},
			goStart(){
				uni.navigateTo({
					url:'/pages/my/start'
				})
			},
			goAuth(){
				uni.navigateTo({
					url:'/pages/my/auth'
				})
			},
			editUserInfo(){
				uni.navigateTo({
					url:'/pages/my/edit'
				})
			},
			resetPsw(){
				uni.navigateTo({
					url:'/pages/my/resetpsw'
				})
			},
			showContent(type){
				uni.navigateTo({
					url:'/pages/index/content?type='+type
				})
			},
			goGuide(){
				uni.navigateTo({
					url:'/pages/home/guide'
				})
			},
			goInvite(){
				uni.navigateTo({
					url:'/pages/home/invite'
				})
			},
			openServiceFn(){
				// plus.runtime.openURL('https://line.me/ti/p/~@701jocrx', (error) => {
				// 	if (error) {
				// 		console.log('打开Line失败:', error);
				// 		uni.showToast({
				// 			title: '无法打开Line应用',
				// 			icon: 'none'
				// 		});
				// 	}
				// });
				openLineApp()
			}
		}
	}
</script>

<style>
	
</style>